<template>
  <div>
    <Header :activIndex = "activIndex" :searchVal="searchVal"></Header>
    <div class="top_big">
      <img :src="banImg" alt="">
    </div>
    <div class="content">
      <div class="contents">
          <div class="padd20">
              <div class="right_table_title posR">
                  <span class="right_table_text">搜索结果</span>
                  <!-- <span class="tab_text">更多>></span> -->
              </div>
              <div class="show_num">
                  找到相关结果约 <span class="color" v-text="proTotal"></span> 条
              </div> 
              <div class="itables">
                 <el-table
                    :data="tableData"
                    style="width: 100%" class="tab_mar"
                    @row-click="getProDetails">
                    <el-table-column
                      prop="subjectNum"
                      label="标的编号"
                      >
                    </el-table-column>
                    <el-table-column
                        prop="subjectName"
                        label="标的名称"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        prop="transferReservePrice"
                        label="挂牌价格">
                    </el-table-column>
                    <el-table-column
                        prop="disclosureStartDate"
                        label="披露起始日">
                    </el-table-column>
                    <el-table-column
                        prop="clicks"
                        label="点击量" width="100">
                    </el-table-column>
                </el-table>   
              </div>
              <div class="pagePos">
                  <el-pagination
                      v-show="proTotal>0"
                      class="allpage"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[15, 30, 45, 60]"
                      :page-size="100"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="proTotal">
                  </el-pagination>  
                  <!-- :limit.sync="tList.showCount" -->
                  <!-- @pagination="getList"  -->
              </div>                                    
          </div>
      </div>
    </div> 
  </div>
</template>

<script>
import Header from "../components/header"
export default {
  components: {
    Header,  
  }, 
  data(){
    return {
      activIndex: 0,
      banImg: '',
      searchVal: '',

      tableData: [],

      page:1,
      limit: 10,
      currentPage:1, // 当前页数
      proTotal: 0
    }
  },
  mounted() {
    this.activIndex = this.$route.query.activIndex
    this.searchVal = this.$route.query.subjectName
    this.getData()
    this.getProjectInfo()
  },
  methods: {
    getData(){
      this.get('/api/rules/indexss').then(data=>{
        if(data.data.slideDTOList.length!=0){
          this.banImg=data.data.slideDTOList[0].slideImage
          console.log(this.banImg)
        }
      })
    },
    handleSizeChange() {
      this.limit = val
    },
    handleCurrentChange() {
      console.log(val)
      if(val !== this.currentPage) {
          this.currentPage = val;
      }
    },
    getProDetails(row) {
        let routeData = ''
				switch (row.detailType) {
					case 2:
            routeData = this.$router.resolve({path:'/transfer_detail',query: {id: row.subjectId}})
						break;
					case 3:
						routeData = this.$router.resolve({path:'/formal_detail',query: {id: row.subjectId}})
						break;
					case 4:
						routeData = this.$router.resolve({path:'/realtor_detail',query: {id: row.subjectId}})
						break;
					case 5:
						routeData = this.$router.resolve({path:'/increase_detail',query: {id: row.subjectId}})
						break;
					case 6:
						routeData = this.$router.resolve({path:'/assettransfer_detail',query: {id: row.subjectId}})
						break;
					default: break;
          }
          window.open(routeData.href, '_blank');
			},
    getProjectInfo() {
      this.get('/info/announcement/project/page', {
        subjectName: this.searchVal,
        page:this.currentPage,
        limit: this.limit
      }).then(data => {
        this.tableData = data.data.list;
        this.proTotal = data.data.total;
      })
    },
  },
  watch: {
    currentPage:{
      handler(){
        this.getProjectInfo()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .top_big>img{
    width: 100%;height: 490px;background: no-repeat center / cover;
  }
  .right_table_text{color: #2C9F45;}
    .show_num{text-align: left;padding:10px  0 0 30px;font-size: 14px;}
    .color{color: #2C9F45;}
    .itables{padding: 20px;}




    .padd20{padding: 20px}
    .table_detail {width: 1162px;margin: 0 auto;}
    .table_detail td{
        line-height: 40px;
        border: solid 1px #e5e5e5; 
        flex: 1;
    }
    .table_detail td:nth-child(odd){
        width: 201px;
        height: 40px;
        background-color: #f5f5f5;
        flex: none;   
          
    }
    .table_detail td span{display: inline-block;margin-left: 15px}
    .contents{
        position: relative;
        text-align: center;
        margin-top: 50px;
        border: solid 1px #cccccc;
        min-height: 890px;
    }
    .pagePos{
        position: absolute;
        bottom: 20px;
        left: 50%;
         transform: translate(-50%, 0%);
    }
    .mar{margin-left: 40px}
    .p_text{
        display: inline-block;
        font-family: SimHei;
        font-size: 14px;
        color: #333333; 
        margin-top: 20px       
    }
    .line_div{
        width: 1162px;
        border-bottom: solid 2px #2C9F45;  
        text-align: center;  
        line-height: 55px;    
        margin: 0 auto;
        margin-top: 18px;
    }
    .line_div p{
        font-family: SimHei;
        font-size: 24px;
        color: #2C9F45;       
    }
    .showContent{
        margin-top: 25px;
        text-align: left;
    }
    .showWord{width: 700px;margin: 0 auto;margin-top: 10px}
    .showWord_title{
        font-family: SimHei;
        font-size: 22px;
        font-weight: 600; 
        text-align: center;   
        margin-bottom: 20px;    
    }
    .min_width{
        min-width: 100px;
        text-indent: 0em;
        display: inline-block;
        text-align: left
    }
    .under-line {
        border-bottom: solid 1px black;
        display: inline-block;
        line-height: 30px;
        text-align: left
    }    
    .showtext_title{
        font-size: 14px;
        line-height: 50px;
    }
    .showtext_title p{text-indent: 2em}
    .showtext_right{text-align: right}
</style>